<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>次数{count}</p>
    </div>
    <button id="add">+</button>
    <!-- <script src="./object.js"></script> -->
    <script>
        
        let data = {
            count:10
        }
        add.onclick = function(){
            data.count++;  //data.cont = data.cont+1
            // alert(data.count);
            // Views(data,'#box');
        }
        Views(data,'#box');
        function Views(data,parent){
            parent = document.querySelector(parent);
            let cont = parent.innerHTML;
            let reg = /{(\w+)}/g;
            let title = reg.exec(cont)[1];
            let value = data[title];
            Object.defineProperty(data,title,{
                set(val){
                    value = val;
                    parent.innerHTML = cont.replace(reg,value);
                },
                get(){
                    return value;
                }
            })
            parent.innerHTML = cont.replace(reg,value);
        }
    </script>
</body>
</html>